<template>
	<view class="content">
		<view class="body">
			<view v-for="(item,index) in arr" :key="index" :id="'message' + item.message_id">
				<view class="body_l" v-if="item.role == 'assistant'">
					<view class="body_lpic a">
						<image :src="now_model.icon" mode=""></image>
					</view>
					<view class="body_box">
						<view class="body_jt">
							<u-icon name="play-left-fill" color="#F6F7FB" size="20"></u-icon>
						</view>
						<!-- <view class="body_lcon pdg" v-html="item.content"></view> -->
						<view class="body_rcon pdg">
							<zero-markdown-view :markdown="item.content" ></zero-markdown-view>
						</view>
						<view style="position: absolute;right: 0;bottom: 10rpx;">
							<u-icon @click="copy(item)" name="file-text-fill" size="30"></u-icon>
						</view>
					</view>
				</view>
				<view class="body_r" v-if="item.role == 'user'">
					<view class="body_box">
						<view class="body_rjt">
							<u-icon name="play-right-fill" color="#F6F7FB" size="20"></u-icon>
						</view>
						<!-- <view class="body_rcon pdg" v-html="item.content"> -->
						<view class="body_rcon pdg">
							<zero-markdown-view :markdown="item.content"></zero-markdown-view>
						</view>
					</view>
					<view class="body_rpic a">
						<!-- <image v-if="token != ''" :src="vals.avatar" mode="aspectFill"></image> -->
						<image :src="userInfo.avatar ? userInfo.avatar : '../../static/head.png'" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="body_l" v-if="loading" style="margin-left: 30rpx;" id="loading">
			<view class="body_lpic a">
				<image :src="now_model.icon" mode=""></image>
			</view>
			<view class="body_box ">
				<view class="body_lcon pdg" style="display: flex;">
					<u-loading-icon :show="loading"></u-loading-icon>
					<view v-if="!typeingText" style="padding: 30rpx;">{{ now_model.title }}思考中...</view>
					<!-- <zero-markdown-view v-if="!typeingText" style="padding: 0 20rpx;" :markdown="now_model.title">思考中...</zero-markdown-view> -->
					<view v-else style="padding: 30rpx;">{{ typeingText }}...</view>
					<!-- <zero-markdown-view v-else style="padding: 0 20rpx;" :markdown="typeingText"></zero-markdown-view> -->
				</view>
			</view>
		</view>
		<view class="flooer">
			<view class="flooer_l">
				<u--textarea v-model="prompt" placeholder="请输入内容,开始体验与人工智能交流吧" border="none" autoHeight
					style="background-color: #F6F7FB;" :maxlength="256" holdKeyboard :showConfirmBar="false"
					:cursorSpacing="28"></u--textarea>
				<!-- <u--input placeholder="请输入内容,开始体验与人工智能交流吧" border="none" clearable v-model="prompt"
					placeholderStyle="color: #7F8084"></u--input> -->
			</view>
			<view class="flooer_r pdg" @click="sendout">
				<view class="flooer_rpic a">
					<image src="../../static/fasong.png" mode=""></image>
				</view>
			</view>
		</view>
		<view style="height: 108rpx;"></view>
	</view>
</template>

<script>
	import setting from "@/common/config";
	//markdown相关插件
	// import markdownFunc from '@/uni_modules/jo-markdown/components/jo-markdown/index.js';
	// #ifdef H5
	import axios from 'axios'
	// #endif
	import {
		mapState
	} from "vuex"
	var that;
	export default {
		data() {
			return {
				prompt: '',
				arr: [],
				timer: null,
				loading: false,
				chat_id: '',
				typeingText: "",
				typeingId: "",
				now_model: {},
			}
		},
		computed: {
			...mapState(['config', 'num', 'userInfo'])
		},
		onLoad(op) {
			if (op.model) {
				this.now_model = JSON.parse(op.model)
			} else {
				this.now_model = this.$store.state.main_model
			}
			uni.setNavigationBarTitle({
				title: this.now_model.title
			})
			this.arr.push({
				role: 'assistant',
				content: this.now_model.first_message,
				message_id: 'aa'
			})
			let that = this;
			if (op.chat_id) {
				this.chat_id = op.chat_id;
				this.getMessages()
			}
			let pong = '';
			let userInfo = uni.getStorageSync('userInfo')
			uni.connectSocket({
				url: setting.ws
			});
			uni.onSocketOpen(function(res) {
				console.log('chat页WebSocket连接已打开！');
				// 绑定UID
				sendMsg({
					type: 'login',
					uid: userInfo.member_id
					// uid: 3
				})
				// 设置心跳包
				pong = setInterval(() => {
					sendMsg({
						type: 'pong'
					})
				}, 20 * 1000);

			});
			uni.onSocketError(function(res) {
				console.log('WebSocket连接打开失败，请检查！');
			});
			uni.onSocketMessage(function(res) {
				// console.log('收到服务器内容：' + res.data);
				let json = JSON.parse(res.data)
				// console.log(json)
				if (json.hasOwnProperty('id')) {
					that.typeingId = json.id
					if (!json.choices[0].delta.finish_reason) {
						if (json.choices[0].delta.hasOwnProperty('content')) {
							that.typeingText += json.choices[0].delta.content
							// 此处自行斟酌是否替换
							// that.typeingText = that.typeingText.replace(/[cogptn]+/ig, "ChatGLM-6B")
						}
					}
				}

			});
			// socket断开时通知后端改变登录状态
			uni.onSocketClose(function(res) {
				console.log('WebSocket 已关闭！');
			});
			//上文中的sendMsg原型
			const sendMsg = function(data) {
				uni.sendSocketMessage({
					data: JSON.stringify(data)
				})
			}
		},
		onUnload() {
			uni.closeSocket()
		},
		onShow() {
			that = this;
			uni.getStorage({
				key: 'token',
				success: function(res) {
					that.token = res.data;

				},
				fail() {
					that.token = '';
				}
			});
		},
		onBackPress() {
			uni.hideLoading()
			clearInterval(this.timer);
		},
		onHide() {
			uni.hideLoading()
			clearInterval(this.timer);
		},
		methods: {
			getMessages() {
				uni.showLoading({

				})
				this.$request("/api/Message/index", "POST", {
					chat_id: this.chat_id,
					limit: 200,
					sort: 'message_id',
					order: 'asc',
				}).then((res) => {
					console.log(res);
					if (res.status == 200) {
						this.arr = this.arr.concat(res.data.data)
						this.$nextTick(() => {
							uni.pageScrollTo({
								selector: "#message" + this.arr[this.arr.length - 1].message_id,
								duration: 100
							});
						});
						uni.hideLoading()
					} else {
						this.$failToast('服务器繁忙，请稍后再试');
					}

				});
			},
			sendout() {
				if (!this.prompt) {
					this.$failToast("请输入内容");
					return;
				}

				this.loading = true;
				this.arr.push({
					role: 'user',
					content: this.prompt,
					message_id: this.arr.length + 1
				});
				let message = this.prompt;
				this.prompt = ""
				this.$nextTick(() => {
					uni.pageScrollTo({
						selector: "#loading",
						duration: 100
					});
				});
				setTimeout(() => {
					this.sub(message)
				}, 200);
			},
			sub(message) {
				// 条件编译处理，h5端uni.request与socket会互相阻塞
				// #ifndef H5
				this.$request("/api/Message/sendV2", "POST", {
					message: message,
					chat_id: this.chat_id,
					model_id: this.now_model.assistant_id
					// member_id: 3 // 调试之用，线上环境为token解码
				}).then((res) => {
					console.log(res);
					if (res.status == 200) {
						this.loading = false;
						this.typeingText = "";
						this.typeingId = "";
						this.arr.push({
							role: res.data.role,
							// 此处自行斟酌是否替换
							content: res.data.content,
							// content: res.data.content.replace(/[cogptn]+/ig, "ChatGLM-6B")
						});
						if (!this.chat_id) {
							this.chat_id = res.data.chat_id
						}
						this.$store.commit('useNum', 1);
						this.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop: 20000,
								duration: 100
							});
						});
					} else if (res.status == 901) {
						this.loading = false;
						this.$failToast('服务器繁忙，请稍后再试');
					} else if (res.status == 411) {
						this.loading = false;
						uni.showModal({
							content: res.msg
						})
					} else {
						this.loading = false;
						this.$failToast(res.msg);
					}
				}).catch(err => {
					console.log(err)
					this.loading = false;
					this.$failToast(err.errMsg);
				})
				// #endif
				// #ifdef H5
				axios({
					method: 'post',
					url: setting.base_url + "/api/Message/sendV2",
					data: {
						message: message,
						chat_id: this.chat_id,
						model_id: this.now_model.assistant_id
					},
					headers: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
						'Authorization': this.$store.state.token
					}
				}).then(response => {
					console.log(response)
					let res = response.data
					if (res.status == 200) {
						this.loading = false;
						this.typeingText = "";
						this.typeingId = "";
						this.arr.push({
							role: res.data.role,
							content: res.data.content
						});
						if (!this.chat_id) {
							this.chat_id = res.data.chat_id
						}
						this.$store.commit('useNum', 1);
						this.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop: 20000,
								duration: 100
							});
						});
					} else if (res.status == 901) {
						this.loading = false;
						this.$failToast('服务器繁忙，请稍后再试');
					} else if (res.status == 411) {
						this.loading = false;
						uni.showModal({
							content: res.msg
						})
					} else {
						this.loading = false;
						this.$failToast(res.msg);
					}
				}).catch(error => {
					// reject(error);
				});
				// #endif

			},
			copy(item) {
				uni.setClipboardData({
					data: item.content,
					success() {
						uni.showModal({
							title: '提示',
							content: '内容已复制到系统剪贴板'
						})
					}
				})
			}
		}
	}
</script>

<style>
	@import '../../components/css/index.css';
</style>